/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import { PlusOutlined } from '@ant-design/icons';
import { Drawer, message, Popconfirm } from 'antd';
import type { ConnectState } from '@/models/connect';
import { useSelector } from 'umi';
import React, { useState, useEffect } from 'react';
import { Row, Col, Button } from 'antd';
import KbEditForm from '../KbEditForm';
import { getBondAreaList, bondAreaDelete } from '@/services/YzBond';

interface AreamanageDrawerType {
  visible: boolean;
  onClose: Function;
}

interface BondAreaListItem {
  district: string[];
  address: string[];
  addressName: string;
}

const AreamanageDrawer: React.FC<AreamanageDrawerType> = (props) => {
  const { visible, onClose } = props;
  const [listArray, setListArray] = useState<any>([]);
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const isMobile = winSize === 'xs';

  const getAddressCode = (list: { district: string[]; address: string[] }) => {
    const addressList: any[] = [];
    list.district.forEach((item1: string) => {
      addressList.push([...list.address, item1]);
    });
    return addressList;
  };
  const getDetail = async () => {
    const { code, data: { list = [] } = {} } = await getBondAreaList();
    if (code == 0) {
      const areaList = Array.from(new Set(list.map((item: BondAreaListItem) => item))).map(
        (item: BondAreaListItem | any) => {
          return {
            id: item.id,
            code: getAddressCode(item),
            label: item.addressName,
          };
        },
      );

      setListArray(areaList);
    }
  };

  useEffect(() => {
    if (visible) getDetail();
  }, [visible]);

  const onDetele = (id: string) => {
    bondAreaDelete({ id }).then((res) => {
      const { code, msg } = res;
      if (code == 0) {
        getDetail();
        message.success(msg);
      } else {
        message.error(msg);
      }
    });
  };

  return (
    <>
      <Drawer visible={visible} onClose={() => onClose(false)} width={isMobile ? '' : 500}>
        {listArray.map((item: { id: string; code: string[]; label: string }) => (
          <Row
            key={item.id}
            justify='space-between'
            align='middle'
            wrap={false}
            style={{ margin: '0 10px' }}
          >
            <Col flex='1'>{item.label}</Col>
            <Col style={{ display: 'flex', textAlign: 'right' }}>
              <KbEditForm modifyId={item.id} value={item.code} getDetail={getDetail}>
                修改
              </KbEditForm>
              <Popconfirm title='你确定删除当前地址吗？' onConfirm={onDetele.bind(null, item.id)}>
                <a style={{ marginLeft: 10 }}>删除</a>
              </Popconfirm>
            </Col>
          </Row>
        ))}
        <KbEditForm getDetail={getDetail}>
          <Button type='link' icon={<PlusOutlined />}>
            添加新地址
          </Button>
        </KbEditForm>
      </Drawer>
    </>
  );
};

export default AreamanageDrawer;
